<script>
export default {
  props: ["data"],
  data() {
    return {
      info: {
        lon: 127.116126,
      },
    };
  },
  render(h) {
    return (
      <div id="Tiptap">
        {this.data.map((r) => {
          return (
            <div class="container" onClick={this._handleChange.bind(this, r)}>
              <h2>{r.name}</h2>
              <div>{r.age}</div>
            </div>
          );
        })}
        <div>{this.$slots.default}</div>

        <div>---</div>
        <div> {this.$scopedSlots.person({ name: "john", age: 65 })}</div>
      </div>
    );
  },
  methods: {
    _handleChange(val) {
      console.log(val);
    },
  },
};
</script>
<style scoped lang="scss">
#Tiptap {
  wdith: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  height: 100px;
  width: 100px;
  background: red;
  margin: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
